<% if (pageData.hero) { %>
    <!-- Hero Section -->
    <section class="bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
            <div class="text-center">
                <h1 class="text-4xl font-bold text-gray-900 sm:text-5xl md:text-6xl">
                    <%= pageData.hero.title %>
                </h1>
                <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
                    <%= pageData.hero.description %>
                </p>
                <div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
                    <% if (pageData.hero.primaryCta) { %>
                        <div class="rounded-md shadow">
                            <a href="<%= pageData.hero.primaryCta.url %>"
                               class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10">
                                <%= pageData.hero.primaryCta.text %>
                            </a>
                        </div>
                    <% } %>
                    <% if (pageData.hero.secondaryCta) { %>
                        <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
                            <a href="<%= pageData.hero.secondaryCta.url %>"
                               class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
                                <%= pageData.hero.secondaryCta.text %>
                            </a>
                        </div>
                    <% } %>
                </div>
            </div>
        </div>
    </section>
<% } %>

<% if (pageData.features) { %>
    <!-- Features Section -->
    <section class="py-12 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h2 class="text-base font-semibold text-indigo-600 tracking-wide uppercase"><%= pageData.features.subtitle %></h2>
                <p class="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl"><%= pageData.features.title %></p>
                <p class="mt-4 max-w-2xl mx-auto text-xl text-gray-500"><%= pageData.features.description %></p>
            </div>

            <div class="mt-10">
                <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">
                    <% pageData.features.items.forEach(function(feature) { %>
                        <div class="relative">
                            <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-white border border-gray-200">
                                <%- feature.icon %>
                            </div>
                            <div class="ml-16 pt-1">
                                <h3 class="text-lg font-medium text-gray-900"><%= feature.title %></h3>
                                <p class="mt-2 text-base text-gray-500"><%= feature.description %></p>
                            </div>
                        </div>
                    <% }); %>
                </div>
            </div>
        </div>
    </section>
<% } %>

<% if (pageData.stats) { %>
    <!-- Stats Section -->
    <section class="bg-white py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"><%= pageData.stats.title %></h2>
                <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500"><%= pageData.stats.description %></p>
            </div>
            <div class="mt-10 grid grid-cols-2 gap-5 sm:grid-cols-4">
                <% pageData.stats.items.forEach(function(stat) { %>
                    <div class="px-4 py-5 bg-gray-50 shadow rounded-lg overflow-hidden sm:p-6">
                        <dt class="text-sm font-medium text-gray-500 truncate"><%= stat.label %></dt>
                        <dd class="mt-1 text-3xl font-semibold text-gray-900"><%= stat.value %></dd>
                    </div>
                <% }); %>
            </div>
        </div>
    </section>
<% } %>

<% if (pageData.cta) { %>
    <!-- CTA Section -->
    <section class="bg-indigo-700">
        <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
            <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
                <span class="block"><%= pageData.cta.title %></span>
            </h2>
            <p class="mt-4 text-lg leading-6 text-indigo-200">
                <%= pageData.cta.description %>
            </p>
            <a href="<%= pageData.cta.button.url %>"
               class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto">
                <%= pageData.cta.button.text %>
            </a>
        </div>
    </section>
<% } %>